<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>车辆控制面板</title>  
    <!-- <script src="config.js"></script>   -->
    <link rel="stylesheet" href="{{ url_for('static', filename='assets/layui/css/layui.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/vehicle-control-panel/style.css') }}">
    <!-- 引入ECharts -->
    <script src="{{ url_for('static', filename='assets/js/echarts/echarts.min.js') }}"></script>
    
</head>  
<body>  
    <!-- 主容器 -->  
    <div class="main-container">  

        <!-- 主要内容区域 -->  
        <div class="main-content">  
            <!-- 左侧：车辆状态显示区 -->  
            <aside class="status-panel">  
                <div class="panel-header">  
                    <h2>车辆状态监控</h2>  
                </div>  
                
                <div class="status-grid">  
                    <!-- 底盘状态 -->  
                    <div class="status-card">  
                        <div class="card-header">  
                            <h3>底盘状态</h3>  
                        </div>  
                        <div class="status-list">  
                            <div class="status-item">  
                                <span class="status-label">车速</span>  
                                <span class="status-value" id="status-speed">-- m/s</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">方向盘</span>  
                                <span class="status-value" id="status-steering-angle">-- °</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">挡位</span>  
                                <span class="status-value" id="status-gear">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">刹车</span>  
                                <span class="status-value" id="status-brake-pedal">-- %</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">油门</span>  
                                <span class="status-value" id="status-throttle-pedal">-- %</span>  
                            </div>  
                        </div>  
                    </div>  

                    <!-- 物理输入 -->  
                    <div class="status-card">  
                        <div class="card-header">  
                            <h3>物理输入</h3>  
                        </div>  
                        <div class="status-list">  
                            <div class="status-item">  
                                <span class="status-label">油门</span>  
                                <span class="status-value" id="throttle-input">-- %</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">刹车</span>  
                                <span class="status-value" id="brake-input">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">方向盘</span>  
                                <span class="status-value" id="steering-input">-- °</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">挡位</span>  
                                <span class="status-value" id="gear-input">-- %</span>  
                            </div>  
                        </div>  
                    </div>  

                    <!-- 程序输入 -->  
                    <div class="status-card">  
                        <div class="card-header">  
                            <h3>程序输入(VS)</h3>  
                        </div>  
                        <div class="status-list">  
                            <div class="status-item">  
                                <span class="status-label">油门</span>  
                                <span class="status-value" id="throttle-command">-- %</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">刹车</span>  
                                <span class="status-value" id="brake-command">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">方向盘</span>  
                                <span class="status-value" id="steering-command">-- °</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">挡位</span>  
                                <span class="status-value" id="gear-command">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">挡位拒绝</span>  
                                <span class="status-value" id="gear-reject">--</span>  
                            </div>  
                        </div>  
                    </div>  

                    <!-- 接管状态 -->  
                    <div class="status-card">  
                        <div class="card-header">  
                            <h3>接管状态</h3>  
                        </div>  
                        <div class="status-list">  
                            <div class="status-item">  
                                <span class="status-label">油门</span>  
                                <span class="status-value" id="throttle-override">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">刹车</span>  
                                <span class="status-value" id="brake-override">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">方向盘</span>  
                                <span class="status-value" id="steering-override">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">挡位</span>  
                                <span class="status-value" id="gear-override">--</span>  
                            </div>  
                        </div>  
                    </div>  

                    <!-- 握手状态 -->  
                    <div class="status-card">  
                        <div class="card-header">  
                            <h3>握手状态</h3>  
                        </div>  
                        <div class="status-list">  
                            <div class="status-item">  
                                <span class="status-label">油门</span>  
                                <span class="status-value" id="throttle-handshake">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">刹车</span>  
                                <span class="status-value" id="brake-handshake">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">方向盘</span>  
                                <span class="status-value" id="steering-handshake">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">挡位</span>  
                                <span class="status-value" id="gear-handshake">--</span>  
                            </div>  
                        </div>  
                    </div>  
                    
                    <!-- 控制状态 -->  
                    <div class="status-card">  
                        <div class="card-header">  
                            <h3>前端控制指令</h3>  
                        </div>  
                        <div class="status-list">  
                            <div class="status-item">  
                                <span class="status-label">油门</span>  
                                <span class="status-disabled" id="control-throttle-status">-- | 禁用</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">刹车</span>  
                                <span class="status-disabled" id="control-brake-status">-- | 禁用</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">方向盘</span>  
                                <span class="status-disabled" id="control-steering-status">-- | 禁用</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">挡位</span>  
                                <span class="status-disabled" id="control-gear-status">-- | 禁用</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">驾驶模式</span>  
                                <span class="status-value" id="control-driving-mode">-- | 泊车</span>  
                            </div>  
                        </div>  
                    </div>  
                    
                    <!-- websocket系统状态 -->  
                    <div class="status-card">  
                        <div class="card-header">  
                            <h3>WebSocket状态</h3>  
                        </div>  
                        <div class="status-list">  
                            <div class="status-item">  
                                <span class="status-label">服务器</span>  
                                <span class="status-disabled" id="server-status">离线</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">连接数</span>  
                                <span class="status-value" id="connected-clients">0</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">数据序号</span>  
                                <span class="status-value" id="data-sequence">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">更新时间</span>  
                                <span class="status-value" id="last-update">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">面板模式</span>  
                                <span class="status-value" id="panel-mode">--</span>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
            </aside>  

            <!-- 中间：控制面板区 -->  
            <main class="control-panel-main">  
                <!-- 全局控制区 -->  
                <section class="global-controls">  
                    <div class="control-card">  
                        <div class="card-header">  
                            <h3>控制工具</h3>  
                            
                            <button id="exit-btn" class="exit-btn" onclick="exitPanel()">退出</button>

                        </div>  
                        
                        <div class="control-row">  
                            <div class="switch-group">  
                                <span class="switch-label">控制模式</span>  
                                <label class="switch">  
                                    <input type="checkbox" id="panel-mode-toggle">  
                                    <span class="slider"></span>  
                                </label>  
                                <span class="status-value" id="panel-mode-text">展示</span>  
                            </div>  
                        </div>  

                        <div class="input-row">  
                            <div id="ip-input" class="control-row control-enabled">  
                                <div class="input-group">  
                                    <label for="ip-address">IP地址</label>  
                                    <input type="text" id="ip-address" placeholder="192.168.1.100" value="">  
                                </div>  
                                <div class="input-group">  
                                    <label for="port-number">端口</label>  
                                    <input type="number" id="port-number" placeholder="8080" value="8080" min="1" max="65535">  
                                </div>  
                            </div>  
                        </div>  

                        <div class="control-row">  
                            <div class="switch-group">  
                                <span class="switch-label">连接</span>  
                                <label class="switch">  
                                    <input type="checkbox" id="connection-toggle">  
                                    <span class="slider"></span>  
                                </label>  
                                <span class="connect-status-text disconnected" id="connect-status-text">未连接</span>  
                            </div>  
                        </div>  

                        <div class="connection-status disconnected" id="connection-status">未连接</div>  

                        <div class="button-row">  
                            <button id="enable-all-btn" class="btn-primary">全部启用</button>  
                            <button id="disable-all-btn" class="btn-danger">紧急停止</button>  
                            <button id="config-load-btn" class="btn-primary">加载配置</button> 
                            <button id="get-data-btn" class="btn-primary" onclick="showOutput()">获取数据</button> 
                        </div>  
                        <input type="file" id="configFileInput" accept=".json" style="display: none;">

                        <div class="help-text">  
                            格式: IP:端口 (例: ws://192.168.1.100:8080); 
                            紧急停止:G键; 
                            配置：最小值~最大值:步长|初始值
                        </div>  
                    </div>  

                     <!-- 综合数据曲线图 -->
                    <div class="chart-card chart-card-large">
                        <div class="chart-header">
                            <h4>综合数据监控</h4>
                            <div class="chart-controls">
                                <button class="chart-btn active" data-chart="comprehensive">实时</button>
                                <button class="chart-btn" data-chart="comprehensive">暂停</button>
                                <button class="chart-btn" data-chart="comprehensive">清除</button>
                            </div>
                        </div>
                        <div class="chart-container chart-container-large" id="comprehensive-chart">
                            <!-- 综合数据曲线图将在这里渲染 -->
                            <!-- <canvas class="chart-canvas"></canvas> -->
                        </div>
                    </div>


                </section>  

                <!-- 车辆控制区 -->  
                <div class="vehicle-controls" id="vehicle-controls">  

                    <!-- 由js动态生成 -->
 
                </div>  
            </main>  

            <!-- 右侧：数据可视化区 -->  
            <aside class="chart-panel">  
                <div class="panel-header">  
                    <h2>数据可视化</h2>  
                </div>  
                
                <!-- 曲线图区域 -->  
                <div class="chart-grid">  

                    <!-- 曲线图-1 -->  
                    <div class="chart-card">  
                        <!-- <div class="chart-header">  
                            <h4>车速变化</h4>  
                        </div>   -->
                        <div class="chart-container" id="chart-1">  
                            <!-- 车速曲线图将在这里渲染 -->  
                            <canvas class="chart-canvas"></canvas>  
                        </div>  
                    </div>  

                    <!-- 曲线图-2 -->  
                    <div class="chart-card">  
                        <!-- <div class="chart-header">  
                            <h4>方向盘角度</h4>  
                        </div> -->
                        <div class="chart-container" id="chart-2">
                            <!-- 方向盘角度曲线图将在这里渲染 -->
                            <canvas class="chart-canvas"></canvas>
                        </div>
                    </div>

                    <!-- 曲线图-3 -->
                    <div class="chart-card">
                        <!-- <div class="chart-header">
                            <h4>油门/刹车</h4>
                        </div> -->
                        <div class="chart-container" id="chart-3">
                            <!-- 油门刹车曲线图将在这里渲染 -->
                            <canvas class="chart-canvas"></canvas>
                        </div>
                    </div>

                    <!-- 曲线图-4 -->
                    <div class="chart-card">
                        <!-- <div class="chart-header">
                            <h4>系统状态</h4>
                        </div> -->
                        <div class="chart-container" id="chart-4">
                            <!-- 系统状态曲线图将在这里渲染 -->
                            <canvas class="chart-canvas"></canvas>
                        </div>
                    </div>



                    <!-- 预留图表区域1 -->
                    <div class="chart-card chart-placeholder">
                        <!-- <div class="chart-header">
                            <h4>预留图表区域1</h4>
                        </div> -->
                        <div class="chart-container" id="reserved-chart-1">
                            <div class="chart-placeholder-content">
                                <p>可用于显示自定义数据</p>
                            </div>
                        </div>
                    </div>

                    <!-- 预留图表区域2 -->
                    <div class="chart-card chart-placeholder">
                        <div class="chart-header">
                            <h4>预留图表区域2</h4>
                        </div>
                        <div class="chart-container" id="reserved-chart-2">
                            <div class="chart-placeholder-content">
                                <p>可用于显示自定义数据</p>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>
        </div>
    </div>
    <script src="{{ url_for('static', filename='assets/layui/layui.js') }}"></script>
    <script src="{{ url_for('static', filename='js/vehicle-control-panel/figure_manager.js') }}"></script>
    <script src="{{ url_for('static', filename='js/vehicle-control-panel/control_cards.js') }}"></script>
    <script src="{{ url_for('static', filename='js/vehicle-control-panel/global_cards.js') }}"></script>




</body>
</html>